<template>
  <div class="cms-select" :class="`style_${type}`">
    <div class="text-sm text-[#000] font-medium" v-if="!player">
      <span>选集</span>
      <span class="float-right pr-4 text-xs text-[#8F9299]" v-if="!showMore">更多 <right-outlined /> </span>
    </div>
    <div class="flex gap-x-3 mt-2 overflow-hidden" v-if="!player">
      <div class="work" v-for="item in worksData" :key="item">
        <align-left-outlined
          v-if="type === 1 && item === 1"
          style="color: #ff613f; font-size: 14px; align-self: center"
        />
        <span v-if="isActived(Number(type), item)" class="text-[18px]">{{ item }}</span>
        <align-left-outlined
          v-if="type === 3 && item === 1"
          style="color: #ff613f; font-size: 14px; transform: scale(0.7); position: absolute; left: 3px; bottom: 3px"
        />
      </div>
    </div>
    <div class="flex justify-start gap-x-2 mt-6" v-if="!player && !showMore">
      <div class="w-[5px] h-[5px] rounded-[50%] bg-[#ff512c] self-center"></div>
      <span class="text-xs text-[#262626] font-medium">展开更多</span>
    </div>
    <div class="flex justify-between pr-4 mt-4" v-if="!showMore">
      <span class="text-base text-[#000000] font-medium leading-6">剧集与更新</span>
      <down-outlined style="color: #8e939a; align-self: center" />
    </div>
    <div class="text-xs text-[#48494d] leading-4 mt-3" v-if="!showMore">
      会员每日19点30分更新2集，首更6集，非会员每日19点30分更新1集/更新至20集
    </div>
    <div class="flex flex-wrap gap-x-3 gap-y-5 mt-5" v-if="!showMore">
      <div class="work-more" v-for="item in moreWorksData" :key="item">
        <align-left-outlined
          v-if="type === 1 && item === 1"
          style="color: #ff613f; font-size: 14px; align-self: center"
        />
        <span v-if="isActived(Number(type), item)" class="text-[18px]">{{ item }}</span>
        <align-left-outlined
          v-if="type === 3 && item === 1"
          style="color: #ff613f; font-size: 14px; transform: scale(0.7); position: absolute; left: 3px; bottom: 3px"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
import cmsSelectWorksProps from './props'
import { AlignLeftOutlined, DownOutlined } from '@ant-design/icons-vue'

export default defineComponent({
  props: cmsSelectWorksProps,
  setup() {
    const worksData: number[] = [1, 2, 3, 4, 5, 6]
    const moreWorksData = ref<number[]>([])
    const getMoreWorks = () => {
      for (let i = 1; i < 22; i++) {
        moreWorksData.value.push(i)
      }
    }
    const isActived = computed(() => (type: number, item: number) => {
      if (type === 1 && item === 1) {
        return false
      }
      return true
    })
    return {
      worksData,
      moreWorksData,
      getMoreWorks,
      isActived
    }
  },
  components: {
    AlignLeftOutlined,
    DownOutlined
  },
  mounted() {
    this.getMoreWorks()
  }
})
</script>

<style lang="less">
.cms-select {
  width: 375px;
  padding: 8px 0 8px 16px;
  background-color: #fff;
  .work {
    width: 54px;
    height: 54px;
    line-height: 54px;
    background: #f6f7f9;
    @apply flex-shrink-0 text-[#48494D] text-center font-medium rounded-lg;
  }
  .work:nth-child(1) {
    border: 1.5px solid #ff613e;
    @apply flex justify-center;
  }
  .work-more {
    width: 47px;
    height: 47px;
    background: #f6f7f9;
    color: #48494d;
    line-height: 47px;
    text-align: center;
    border-radius: 7px;
  }
  &.style_1 {
  }
  &.style_2 {
    .work:nth-child(1) {
      border: none;
      background: rgba(255, 97, 63, 0.18);
      color: #ff613f;
    }
    .work-more:nth-child(1) {
      background: rgba(255, 97, 63, 0.18);
      color: #ff613f;
      border: none;
    }
  }
  &.style_3 {
    .work:nth-child(1) {
      border: none;

      color: #ff613f;
      position: relative;
    }
    .work-more:nth-child(1) {
      color: #ff613f;
      border: none;
      position: relative;
    }
  }
}
</style>
